<template>
  <div class="demo-box">
    <a-form :model="formValues" :rules="formRlues" ref="AForm" @validate="handleValidate">
      <a-form-item label="姓名" prop='name' :rules="formRlues.name">
        <Input v-model="formValues.name" type="text" placeholder="请输入姓名"></Input>
      </a-form-item>
      <a-form-item label="密码" prop='password' :rules="formRlues.password">
        <Input v-model="formValues.password" type="password" placeholder="请输入密码"></Input>
      </a-form-item>
      <a-form-item>
        <button @click="submit">提交</button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang='tsx'>
import {defineComponent, ref, reactive} from 'vue';
import { FormContext } from './type';
import { ErrorList } from 'async-validator'
  export default defineComponent({
    name: "FormDemo",
    setup() {
      const text = ref('');
      const formValues = reactive({
        name: '',
        password: ''
      });
      const AForm = ref<FormContext | null>(null);
      const submit = () => {
        AForm.value!.validate(valid => {
          console.log('valid', valid);
        });
      }
      const formRlues = reactive({
        name: [ { required: true, message: '请输入姓名', }, { max: 6, message: '最大值为6', trigger: 'blur'} ],
        password: [{ required: true, message: '请输入密码', }, { min: 6, message: '最小值为6', trigger: 'blur'}]
      });
      
      const handleValidate = (valid: boolean | ErrorList) => {
        console.log(valid)
      }
      return {
        text,
        formValues,
        formRlues,
        AForm,
        submit,
        handleValidate
      }
    }
  });
</script>

<style lang='scss' scoped>
</style>
